<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
  *{
    margin:0;padding:0;
  }
  #jd{
    width:730px;height:454px;
	position:relative;
	margin:100px auto;
  }
  #jd .banner{
    width:730px;height:454px;
  }
  #jd .banner li{
    width:730px;height:454px;
	vertical-align:bottom;
	position:absolute;
	list-style:none;
	opacity:0;
  }
  #jd .btn{
    width:150px;height:20px;
	position:absolute;
	left:50%;
	margin-left:-75px;
	bottom:10px;
  }
  #jd .btn span{
    width:20px;height:20px;
	background:rgba(0,0,0,0.8);
	display:block;
	float:left;
	margin-right:5px;
	color:#fff;
	border-radius:50%;
	text-align:center;
	cursor:pointer;
  }
  #jd .btn .active{
    background:rgba(255,24,16,0.8)
  }
   #jd .move-btn{
     display:none;
   }
   #jd .move-btn a{
     text-decoration:none;
	 width:28px;height:62px;
	 background:rgba(0,0,0,0.2);
	 position:absolute;
	 top:50%;
	 margin-top:-31px;
	 color:#fff;
	 font-size:24px;
	 text-align:center;
	 line-height:62px;
	 }
	 #jd .move-btn .last{
	   right:0;
	 }
  
</style>

</head>
<body>
  <div id="jd">
    <div class="banner">
	  <ul>
	    <li style="opacity:1">
		  <a href="#">
		    <img src="images/1.jpg"/>
		  </a>
		</li>
		<li>
		  <a href="#">
		    <img src="images/2.jpg"/>
		  </a>
		</li>
		<li>
		  <a href="#">
		    <img src="images/3.jpg"/>
		  </a>
		</li>
		<li>
		  <a href="#">
		    <img src="images/4.jpg"/>
		  </a>
		</li>
		<li>
		  <a href="#">
		    <img src="images/5.jpg"/>
		  </a>
		</li>
		<li>
		  <a href="#">
		    <img src="images/6.jpg"/>
		  </a>
		</li>
	  </ul>
	</div>
	<div class="btn">
	  <span class="active">1</span>
	  <span>2</span>
	  <span>3</span>
	  <span>4</span>
	  <span>5</span>
	  <span>6</span>
	</div>
	<div class="move-btn">
	  <a class="pre" href="javscript:;"><</a>
	  <a class="last" href="javscript:;">></a>
	</div>
  </div>
  <script src="jquery.js"></script>
  <script type="text/javascript">
    $(function(){
	    
	    $("#jd").hover(function(){
	      clearInterval(t)
	      $("#jd .move-btn").css("display","block");
	    },function(){
	        autoMove();
	        $("#jd .move-btn").css("display","none")})
	    $("#jd .btn span").hover(function(){
	        var _index=$(this).index();
	        $(this).addClass("active").siblings().removeClass("active");
		    $("#jd .banner li").eq(_index).animate({opacity:1},500).siblings().animate({opacity:0},500);
		});
		var coutindex=0
		function autoMove(){
		   t=setInterval(function(){
		    coutindex++
			if(coutindex>5){coutindex=0}
		    $("#jd .btn span").eq(coutindex).addClass("active").siblings().removeClass("active");
		    $("#jd .banner li").eq(coutindex).animate({opacity:1},500).siblings().animate({opacity:0},500);
		  },1000)
		}
		autoMove();
		
	})
  </script>
</body>
</html>